<template>
    <div class="log-container content-wrapper">

        <div class="filter-container">

            <el-radio-group v-model="logType" @change="handleRadio" class="filter-item">
                <el-radio-button label="login">登录日志</el-radio-button>
                <el-radio-button label="operate">操作日志</el-radio-button>
                <el-radio-button label="error">错误日志</el-radio-button>
            </el-radio-group>

            <el-select v-model="listQuery.actionType" placeholder="操作类型" v-show="logType=='operate' || logType=='error'" clearable class="filter-item">
                <el-option
                        v-for="item in actionTypeOptions"
                        :key="item.key"
                        :label="item.label"
                        :value="item.key"
                >
                </el-option>
            </el-select>

            <el-input v-model="listQuery.account" placeholder="账号" v-show="logType=='login'" style="width: 200px;" class="filter-item"></el-input>

            <el-input v-model="listQuery.requestIp" placeholder="请求IP" style="width: 200px;" class="filter-item"></el-input>

            <el-date-picker
                    v-model="listQuery.daterange"
                    type="daterange"
                    range-separator="至"
                    align="right"
                    placeholder="选择日期范围"
                    :editable="false"
                    :picker-options="pickerOptions"
                    @change="dateChange"
                    class="filter-item">
            </el-date-picker>

            <el-select v-model="listQuery.orderByLogin" placeholder="排序" class="filter-item" v-show="loginSelect" style="width: 150px">
                <el-option
                        v-for="item in LoginSortOptions"
                        :key="item.key"
                        :label="item.label"
                        :value="item.key">
                </el-option>
            </el-select>

            <el-select v-model="listQuery.orderByOperate" placeholder="排序" class="filter-item" v-show="operatorSelect" style="width: 150px">
                <el-option
                        v-for="item in OperatorSortOptions"
                        :key="item.key"
                        :label="item.label"
                        :value="item.key">
                </el-option>
            </el-select>

            <el-select v-model="listQuery.orderByEexception" placeholder="排序" class="filter-item" v-show="exceptionSelect" style="width: 150px">
                <el-option
                        v-for="item in ExceptionSortOptions"
                        :key="item.key"
                        :label="item.label"
                        :value="item.key">
                </el-option>
            </el-select>

            <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
            <el-button class="filter-item" type="danger" icon="delete" @click="handleDelete">删除</el-button>

        </div>

        <section>
            <transition name="fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </section>
    </div>
</template>

<script>
    import router from '@/router'
    import { mapGetters } from 'vuex'
    import { pickerOptions } from '@/utils'
    import { deletedOperate, fetchOperateObject, fetchOperateList, deletedError, fetchErrorObject, fetchErrorList, deletedLogin, fetchLoginObject, fetchLoginList } from '@/api/system/logger'

    const actionTypeOptions = [
        {label: '添加', key: '添加'},
        {label: '修改', key: '修改'},
        {label: '删除', key: '删除'},
        {label: '查询', key: '查询'},
        {label: '业务操作', key: '业务操作'},
        {label: '未知', key: '未知'}
    ]

    const LoginSortOptions = [{label: '按时间升序', key: 'login_time asc'}, {label: '按时间降序', key: 'login_time desc'}]
    const OperatorSortOptions = [{label: '按时间升序', key: 'operator_time asc'}, {label: '按时间降序', key: 'operator_time desc'}]
    const ExceptionSortOptions = [{label: '按时间升序', key: 'operator_time asc'}, {label: '按时间降序', key: 'operator_time desc'}]

    export default {
        name: 'log',
        data() {
            return {
                logType: 'login',
                actionTypeOptions,
                LoginSortOptions,
                OperatorSortOptions,
                ExceptionSortOptions,
                listQuery: {
                    account: '',
                    actionType: '',
                    requestIp: null,
                    daterange: null,
                    orderByLogin: 'login_time desc',
                    orderByOperate: 'operator_time desc',
                    orderByEexception: 'operator_time desc'
                },
                loginSelect: false,
                operatorSelect: false,
                exceptionSelect: false,
                pickerOptions: {
                    disabledDate(date) {
                        return date > Date.now()
                    },
                    shortcuts: pickerOptions
                }
            }
        },
        created() {
            var subIndex = this.$route.path.lastIndexOf('/')
            this.logType = this.$route.path.substr(subIndex+1)
            if(this.logType === 'login') {
                this.loginSelect = true
                this.operatorSelect = false
                this.exceptionSelect = false
            } else if(this.logType === 'operate') {
                this.loginSelect = false
                this.operatorSelect = true
                this.exceptionSelect = false
            } else if(this.logType === 'error') {
                this.loginSelect = false
                this.operatorSelect = false
                this.exceptionSelect = true
            }
        },
        computed: {
            ...mapGetters(['loggerSelection'])
        },
        methods: {
            dateChange(val) {
                var dateArray = val.split('至')
                this.listQuery.daterange = dateArray
            },
            handleRadio(label) {
                router.push('/system/log/'+label)
                this.$store.commit('LOGGER_SELECTION', {type: label})

                if(label === 'login') {
                    this.loginSelect = true
                    this.operatorSelect = false
                    this.exceptionSelect = false
                } else if(label === 'operate') {
                    this.loginSelect = false
                    this.operatorSelect = true
                    this.exceptionSelect = false
                } else if(label === 'error') {
                    this.loginSelect = false
                    this.operatorSelect = false
                    this.exceptionSelect = true
                }
            },
            handleFilter() {
                this.$store.commit('LOGGER_SELECTION', {query: this.listQuery, action: !this.loggerSelection.action})
            },
            handleDelete() {
                var log = this.loggerSelection
                if(Log.items != null && Log.items.length > 0) {
                    this.$confirm('确定要删除？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        for(var item of Log.items) {
                            if(this.logType == 'error') {
                                deletedError(item.id).then(response => {
                                    if(response.data.status) {
                                        //修改state中的Logger状态，执行子组件中的reload方法，刷新列表
                                        this.$store.commit('LOGGER_SELECTION', {type: this.logType, items: null, action: !Log.action})
                                        this.$notify({
                                            title: '成功', message: response.data.message,
                                            type: 'success', duration: 2000
                                        })
                                    } else {
                                        this.$notify({
                                            title: '发生错误', message: response.data.message,
                                            type: 'error', duration: 2000
                                        })
                                    }
                                })
                            } else if(this.logType == 'operate') {
                                deletedOperate(item.id).then(response => {
                                    if(response.data.status) {
                                        //修改state中的Logger状态，执行子组件中的reload方法，刷新列表
                                        this.$store.commit('LOGGER_SELECTION', {type: this.logType, items: null, action: !Log.action})
                                        this.$notify({
                                            title: '成功', message: response.data.message,
                                            type: 'success', duration: 2000
                                        })
                                    } else {
                                        this.$notify({
                                            title: '发生错误', message: response.data.message,
                                            type: 'error', duration: 2000
                                        })
                                    }
                                })
                            } else if(this.logType == 'login') {
                                deletedLogin(item.id).then(response => {
                                    if(response.data.status) {
                                        //修改state中的Logger状态，执行子组件中的reload方法，刷新列表
                                        this.$store.commit('LOGGER_SELECTION', {type: this.logType, items: null, action: !Log.action})
                                        this.$notify({
                                            title: '成功', message: response.data.message,
                                            type: 'success', duration: 2000
                                        })
                                    } else {
                                        this.$notify({
                                            title: '发生错误', message: response.data.message,
                                            type: 'error', duration: 2000
                                        })
                                    }
                                })
                            }

                        }
                    }).catch(() => {
                        this.$message({ type: 'info', message: '已取消删除' })
                    })
                } else {
                    this.$message({
                        message: '请选择需要删除的记录',
                        type: 'warning', duration: 2000
                    })
                }
            }
        },
        watch:{
            $route() {
                var subIndex = this.$route.path.lastIndexOf('/')
                this.logType = this.$route.path.substr(subIndex+1)
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>